<template>
  <div>
    <IndexAnimatation></IndexAnimatation>
    <Header background="transparent"></Header>
    <div class="common">
      <div class="home">{{ info.introduction }}</div>
    </div>
    <Footer fixed></Footer>
  </div>
</template>
<script>
import IndexAnimatation from '@/components/IndexAnimatation.vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
let i = 0
let timer = null
export default {
  data () {
    return {
      info: {
        introduction: '',
        introductionTarget: '因为你 我想要变成更好的自己 只为证明我能够与你相配',
      }
    }
  },
  mounted () {
    this.typing()
  },
  methods: {
    typing () {
      if (i <= this.info.introductionTarget.length) {
        this.info.introduction = this.info.introductionTarget.slice(0, i++) + '...'
        timer = setTimeout(this.typing, 100)
      } else {
        this.info.introduction = this.info.introductionTarget
        clearTimeout(timer)
      }
    }
  },
  components: {
    IndexAnimatation,
    Header,
    Footer
  }
}
</script>
<style scoped>
.home {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  font-size: 0.48rem;
  color: #fff;
  font-weight: 500;
}
</style>
